<script lang="ts" setup>
import { ref } from 'vue';
import { getHotelRoomDetails } from '@/api/hotels';
import { useLocale } from '@/locale/locale';

const { t } = useLocale();
const popupRef = ref();
const data = ref({
  list: [],
  name: '',
  occupancy: 0,
  bedType: '',
  cancellationPolicy: '',
  size: ''
});

defineExpose({
  open: async (uid: string, id: string) => {
    const res = await getHotelRoomDetails(uid, id);
    data.value.list = res.data.coverList;
    data.value.cancellationPolicy = res.data.cancelPolicy;
    data.value.name = res.data.nameLanguage[1].content;
    data.value.occupancy = res.data.occupancy;
    data.value.bedType = res.data.bedType ?? '';
    data.value.size = res.data.size;

    if (res.data.coverList.length === 0) {
      data.value.list = [res.data.cover] as any;
    }

    popupRef.value?.open();
  }
});

function close() {
  popupRef.value?.close();
}
</script>

<template>
  <uni-popup
    ref="popupRef"
    :safe-area="false"
    mask-background-color="rgba(0, 0, 0, 0.8)"
    type="bottom"
  >
    <view class="absolute details-room-details__close-btn" @click.stop="close">
      <uv-icon color="#fff" name="close" size="12" />
    </view>
    <scroll-view class="details-room-details__scroll" scroll-y style="max-height: 80vh">
      <swiper autoplay circular class="rounded-t-2xl" style="height: 420rpx">
        <swiper-item v-for="item in data.list" :key="item">
          <image :src="item" class="w-full rounded-t-2xl" style="height: 420rpx" />
        </swiper-item>
      </swiper>
      <view class="mb-4 bg-white px-3 pt-8 pb-6">
        <view class="mb-3 text-lg text-primary font-medium">{{ data.name }}</view>
        <!-- 面积 -->
        <view class="mb-4 flex items-center">
          <image class="w-3 h-3 m-2" src="/static/hotel_details_room_details_area.png" />
          <text class="text-sm text-primary">
            {{ t('roomDetailIncomeNumber', { occupancy: data.occupancy }) }}
          </text>
        </view>
        <!-- 面积 -->
        <view class="mb-4 flex items-center">
          <image class="w-3 h-3 m-2" src="/static/hotel_details_room_details_area.png" />
          <text class="text-sm text-primary">{{ t('roomDetailSize', { size: data.size }) }}</text>
        </view>
        <!-- 床型 -->
        <view v-if="data.bedType" class="mb-4">
          <view class="flex items-center">
            <image class="w-3 h-3 m-2" src="/static/hotel_details_room_details_bed.png" />
            <text class="text-sm text-primary">
              {{ t('roomDetailBellType', { bellType: data.bedType }) }}
            </text>
          </view>
          <view class="details-room-details__bed-tips">{{ t('roomDetailExtraBed') }}</view>
        </view>
        <!-- 早餐 -->
        <view class="flex items-center">
          <image class="w-3 h-3 m-2" src="/static/hotel_details_room_details_dining.png" />
          <text class="text-sm text-primary">{{ t('roomDetailNoBreakfast') }}</text>
        </view>
      </view>
      <apt-room-amenities />
      <apt-booking-tips :cancellation-policy="data.cancellationPolicy" />
      <apt-safe-area />
    </scroll-view>
  </uni-popup>
</template>

<style lang="scss">
.details-room-details__scroll {
  position: relative;
  border-radius: 40rpx 40rpx 0 0;
  background: #f4f4f4;
}

.details-room-details__close-btn {
  top: 56rpx;
  right: 26rpx;
  z-index: 99;
  padding: 12rpx;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.17);
}

.details-room-details__bed-tips {
  margin-top: 4rpx;
  font-size: 20rpx;
  line-height: 28rpx;
  color: #939393;
}
</style>
